<!--ERP零售销货单明细表-->
<script setup lang="ts">
    import {AxiosPromise} from "axios";
    import lodash from 'lodash-es'

    defineOptions({
        name: "OdsErpRetailSalesOrderDetails",
        inheritAttrs: false,
    });

    import {ElLoading, UploadFile} from "element-plus";
    import {
        getOdsErpRetailSalesOrderDetailsPage,
        getOdsErpRetailSalesOrderDetailsForm,
        saveOdsErpRetailSalesOrderDetails,
        deleteOdsErpRetailSalesOrderDetails,
        importOdsErpRetailSalesOrderDetails,
        exportOdsErpRetailSalesOrderDetails
    } from "@/api/odsErpRetailSalesOrderDetails";

    const queryFormRef = ref(ElForm);
    const dataFormRef = ref(ElForm);

    const loading = ref(false);
    const ids = ref<number[]>([]);
    const total = ref(0);

    const queryParams = reactive<any>({
        pageNum: 1,
        pageSize: 20,
    });

    const odsErpRetailSalesOrderDetailsList = ref<[]>();

    const dialog = reactive<DialogOption>({
        visible: false,
    });
    const importDialog = reactive<DialogOption>({
        title: "ERP零售销货单明细表数据导入",
        visible: false,
    });

    const excelFile = ref<File>();
    const excelFilelist = ref<File[]>([]);
    const formData = reactive<any>({});

    const rules = reactive({
        djbh: [{ required: true, message: "请输入单据编号", trigger: "blur" }],
        mibh: [{ required: true, message: "请输入", trigger: "blur" }],
        mxbh: [{ required: true, message: "请输入", trigger: "blur" }],
        spdm: [{ required: true, message: "请输入商品代码", trigger: "blur" }],
        gg1dm: [{ required: true, message: "请输入颜色代码", trigger: "blur" }],
        gg2dm: [{ required: true, message: "请输入尺码代码", trigger: "blur" }],
        sl: [{ required: true, message: "请输入数量", trigger: "blur" }],
        sl1: [{ required: true, message: "请输入", trigger: "blur" }],
        sl2: [{ required: true, message: "请输入", trigger: "blur" }],
        sl3: [{ required: true, message: "请输入", trigger: "blur" }],
        bzsl: [{ required: true, message: "请输入", trigger: "blur" }],
        ckj: [{ required: true, message: "请输入标准价", trigger: "blur" }],
        zk: [{ required: true, message: "请输入折扣", trigger: "blur" }],
        dj: [{ required: true, message: "请输入单价", trigger: "blur" }],
        dj1: [{ required: true, message: "请输入默认单价", trigger: "blur" }],
        dj2: [{ required: true, message: "请输入原单价", trigger: "blur" }],
        dj3: [{ required: true, message: "请输入成本价", trigger: "blur" }],
        je: [{ required: true, message: "请输入金额", trigger: "blur" }],
        je1: [{ required: true, message: "请输入", trigger: "blur" }],
        je2: [{ required: true, message: "请输入", trigger: "blur" }],
        je3: [{ required: true, message: "请输入", trigger: "blur" }],
        bzje: [{ required: true, message: "请输入标准金额", trigger: "blur" }],
        bzs: [{ required: true, message: "请输入", trigger: "blur" }],
        hh: [{ required: true, message: "请输入", trigger: "blur" }],
        djh: [{ required: true, message: "请输入小票号", trigger: "blur" }],
        mih: [{ required: true, message: "请输入", trigger: "blur" }],
        mxh: [{ required: true, message: "请输入", trigger: "blur" }],
        djh1: [{ required: true, message: "请输入", trigger: "blur" }],
        mih1: [{ required: true, message: "请输入", trigger: "blur" }],
        mxh1: [{ required: true, message: "请输入", trigger: "blur" }],
        bz: [{ required: true, message: "请输入备注", trigger: "blur" }],
        byzd1: [{ required: true, message: "请输入价格选定", trigger: "blur" }],
        byzd2: [{ required: true, message: "请输入锁定", trigger: "blur" }],
        byzd3: [{ required: true, message: "请输入店员号", trigger: "blur" }],
        byzd4: [{ required: true, message: "请输入VIP号", trigger: "blur" }],
        byzd5: [{ required: true, message: "请输入礼券卡", trigger: "blur" }],
        byzd6: [{ required: true, message: "请输入店员名称", trigger: "blur" }],
        byzd7: [{ required: true, message: "请输入", trigger: "blur" }],
        byzd8: [{ required: true, message: "请输入扣率", trigger: "blur" }],
        byzd9: [{ required: true, message: "请输入结算额", trigger: "blur" }],
        byzd10: [{ required: true, message: "请输入补偿金额", trigger: "blur" }],
        byzd11: [{ required: true, message: "请输入", trigger: "blur" }],
        byzd12: [{ required: true, message: "请输入折扣", trigger: "blur" }],
        byzd13: [{ required: true, message: "请输入扣率", trigger: "blur" }],
        byzd14: [{ required: true, message: "请输入销售时间", trigger: "blur" }],
        byzd15: [{ required: true, message: "请输入", trigger: "blur" }],
        byzd16: [{ required: true, message: "请输入", trigger: "blur" }],
        schd: [{ required: true, message: "请输入商场活动", trigger: "blur" }],
        pcdm: [{ required: true, message: "请输入批次代码", trigger: "blur" }],
        jsjg: [{ required: true, message: "请输入", trigger: "blur" }],
        jishuije: [{ required: true, message: "请输入", trigger: "blur" }],
        yxyjje: [{ required: true, message: "请输入", trigger: "blur" }],
        kwdm: [{ required: true, message: "请输入库位名称", trigger: "blur" }],
        cxlx: [{ required: true, message: "请输入", trigger: "blur" }],
        zdcxdh: [{ required: true, message: "请输入整单促销编号", trigger: "blur" }],
        kbcxdh: [{ required: true, message: "请输入捆绑促销编号", trigger: "blur" }],
        spStatus: [{ required: true, message: "请输入商品状态", trigger: "blur" }],
        gjyy: [{ required: true, message: "请输入", trigger: "blur" }],
        thhyy: [{ required: true, message: "请输入", trigger: "blur" }],
        ppdm: [{ required: true, message: "请输入", trigger: "blur" }],
        thhType: [{ required: true, message: "请输入", trigger: "blur" }],
        thsl: [{ required: true, message: "请输入", trigger: "blur" }],
        xpbh: [{ required: true, message: "请输入小票编号", trigger: "blur" }],
        jf: [{ required: true, message: "请输入积分", trigger: "blur" }],
        spjf: [{ required: true, message: "请输入商品积分", trigger: "blur" }],
        dzyhje: [{ required: true, message: "请输入", trigger: "blur" }],
        dzzk: [{ required: true, message: "请输入", trigger: "blur" }],
        dzbh: [{ required: true, message: "请输入礼券卡", trigger: "blur" }],
        kbcxmc: [{ required: true, message: "请输入捆绑促销名称", trigger: "blur" }],
        zdcxmc: [{ required: true, message: "请输入整单促销名称", trigger: "blur" }],
        yxsl: [{ required: true, message: "请输入", trigger: "blur" }],
        ftje: [{ required: true, message: "请输入", trigger: "blur" }],
        jfje: [{ required: true, message: "请输入", trigger: "blur" }],
        thcl: [{ required: true, message: "请输入退货处理", trigger: "blur" }],
        vpczbj: [{ required: true, message: "请输入会员储值本金", trigger: "blur" }],
        thhMxid: [{ required: true, message: "请输入", trigger: "blur" }],
        detailIndex: [{ required: true, message: "请输入", trigger: "blur" }],
        possptm: [{ required: true, message: "请输入POS条码", trigger: "blur" }],
        bzgg: [{ required: true, message: "请输入包装规格", trigger: "blur" }],
        bzggdj: [{ required: true, message: "请输入包装规格单价", trigger: "blur" }],
        bzggsl: [{ required: true, message: "请输入包装规格数量", trigger: "blur" }],
        bzggckj: [{ required: true, message: "请输入包装规格参考价", trigger: "blur" }],
        bzggzk: [{ required: true, message: "请输入包装规格折扣", trigger: "blur" }],
        isWeb: [{ required: true, message: "请输入网购", trigger: "blur" }],
        zkdjTj: [{ required: true, message: "请输入", trigger: "blur" }],
        tax: [{ required: true, message: "请输入税额", trigger: "blur" }],
        taxDc: [{ required: true, message: "请输入税额本位币", trigger: "blur" }],
        jeWithoutTax: [{ required: true, message: "请输入不含税金额", trigger: "blur" }],
        jeWithoutTaxDc: [{ required: true, message: "请输入不含税金额本位币", trigger: "blur" }],
        taxRate: [{ required: true, message: "请输入税率", trigger: "blur" }],
        priceWithoutTax: [{ required: true, message: "请输入不含税单价", trigger: "blur" }],
        priceWithoutTaxDc: [{ required: true, message: "请输入不含税单价本位币", trigger: "blur" }],
        jeDc: [{ required: true, message: "请输入金额本位币", trigger: "blur" }],
        shareShippingFee: [{ required: true, message: "请输入", trigger: "blur" }],
        ispj: [{ required: true, message: "请输入", trigger: "blur" }],
        zkdySign: [{ required: true, message: "请输入", trigger: "blur" }],
        spzk: [{ required: true, message: "请输入", trigger: "blur" }],
        zk1: [{ required: true, message: "请输入", trigger: "blur" }],
        zk2: [{ required: true, message: "请输入", trigger: "blur" }],
        zk3: [{ required: true, message: "请输入", trigger: "blur" }],
        yssl: [{ required: true, message: "请输入", trigger: "blur" }],
        xsje: [{ required: true, message: "请输入", trigger: "blur" }],
        statusCode: [{ required: true, message: "请输入", trigger: "blur" }],
        isstoredelivery: [{ required: true, message: "请输入", trigger: "blur" }],
        epc: [{ required: true, message: "请输入", trigger: "blur" }],
        dhjf: [{ required: true, message: "请输入", trigger: "blur" }],
        pcscrq: [{ required: true, message: "请输入生产时间", trigger: "blur" }],
        pcyxq: [{ required: true, message: "请输入有效期（天）", trigger: "blur" }],
        pcdqr: [{ required: true, message: "请输入到期日", trigger: "blur" }],
        pclqr: [{ required: true, message: "请输入临期日", trigger: "blur" }],
        xxje: [{ required: true, message: "请输入", trigger: "blur" }],
        cldm: [{ required: true, message: "请输入", trigger: "blur" }],
        clmc: [{ required: true, message: "请输入", trigger: "blur" }],
    });




    /**
     * 查询
     */
    function handleQuery() {
        loading.value = true;
        getOdsErpRetailSalesOrderDetailsPage(queryParams)
            .then(({ data }) => {
                odsErpRetailSalesOrderDetailsList.value = data.list;
                total.value = data.total;
            })
            .finally(() => {
                loading.value = false;
            });
    }

    /**
     * 重置查询
     */
    function resetQuery() {
        queryFormRef.value.resetFields();
        queryParams.pageNum = 1;
        handleQuery();
    }

    /**
     * 行checkbox change事件
     */
    function handleSelectionChange(selection: any) {
        ids.value = selection.map((item: any) => item.id);
    }

    /**
     * 打开字典类型表单弹窗
     *
     * @param dicTypeId 字典类型ID
     */
    function openDialog(id?: number) {
        dialog.visible = true;
        if (id) {
            dialog.title = "修改ERP零售销货单明细表";
            getOdsErpRetailSalesOrderDetailsForm(id).then(({ data }) => {
                Object.assign(formData, data);
            });
        } else {
            dialog.title = "新增ERP零售销货单明细表";
        }
    }

    /**
     * 字典类型表单提交
     */
    function handleSubmit() {
        dataFormRef.value.validate((isValid: boolean) => {
            if (isValid) {
                loading.value = false;
                saveOdsErpRetailSalesOrderDetails(formData)
                    .then(() => {
                        ElMessage.success("保存成功");
                        closeDialog();
                        handleQuery();
                    })
                    .finally(() => (loading.value = false));
            }
        });
    }

    /**
     * 关闭弹窗
     */
    function closeDialog() {
        dialog.visible = false;
        resetForm();
    }

    /**
     * 重置表单
     */
    function resetForm() {
        dataFormRef.value.resetFields();
        dataFormRef.value.clearValidate();

        formData.id = undefined;
    }

    /**
     * 删除ERP零售销货单明细表
     */
    function handleDelete(id?: number) {
        const dictTypeIds = [id || ids.value].join(",");
        if (!dictTypeIds) {
            ElMessage.warning("请勾选删除项");
            return;
        }

        ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        }).then(() => {
            deleteOdsErpRetailSalesOrderDetails(dictTypeIds).then(() => {
                ElMessage.success("删除成功");
                resetQuery();
            });
        });
    }

    /** 打开导入弹窗 */
    async function openImportDialog() {
        importDialog.visible = true;
    }

    /**
     * Excel文件change事件
     *
     * @param file
     */
    function handleExcelChange(file: UploadFile) {
        if (file.size !== undefined) {
            if (file.size > 20*1024*1024) {
                ElMessage.warning("上传文件大小不能超过20M");
                return false
            }
        }
        if (!/\.(xlsx|xls|XLSX|XLS)$/.test(file.name)) {
            ElMessage.warning("上传Excel只能为xlsx、xls格式");
            excelFile.value = undefined;
            excelFilelist.value = [];
            return false;
        }
        excelFile.value = file.raw;
    }

    /** 导入提交 */
    function handleImport() {
        if (!excelFile.value) {
            ElMessage.warning("上传Excel文件不能为空");
            return false;
        }
        const importLoading = ElLoading.service({
            lock: true,
            text: '导入中...',
            background: 'rgba(0, 0, 0, 0.7)',
        })
        importOdsErpRetailSalesOrderDetails(excelFile.value).then((response) => {

            closeImportDialog();
            ElMessage.success('导入成功');
            resetQuery();
        }).finally(() => importLoading.close());
    }

    /**  关闭导入弹窗 */
    function closeImportDialog() {
        importDialog.visible = false;
        excelFile.value = undefined;
        excelFilelist.value = [];
    }

    /** 导出ERP零售销货单明细表 */
    function handleExport() {
        const strIds = [ids.value].join(",");
        exportOdsErpRetailSalesOrderDetails(strIds).then((response: any) => {
            const blob = new Blob([response.data], {
                type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
            });
            const a = document.createElement("a");
            const href = window.URL.createObjectURL(blob); // 下载的链接
            a.href = href;
            a.download = decodeURI(
                response.headers["content-disposition"].split(";")[1].split("=")[1]
            ); // 获取后台设置的文件名称
            document.body.appendChild(a);
            a.click(); // 点击导出
            document.body.removeChild(a); // 下载完成移除元素
            window.URL.revokeObjectURL(href); // 释放掉blob对象
        });
    }

    onMounted(() => {
        handleQuery();
    });
</script>

<template>
    <div class="app-container">
        <div class="search-container">
            <el-form ref="queryFormRef" :model="queryParams" :inline="true">
                <el-form-item label="关键词" prop="keywords">
                    <el-input
                            v-model="queryParams.keywords"
                            placeholder="关键词"
                            clearable
                            @keyup.enter="handleQuery"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleQuery()"
                    ><i-ep-search />搜索</el-button
                    >
                    <el-button @click="resetQuery()"><i-ep-refresh />重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-card shadow="never">
            <template #header>
                <div class="flex justify-between">
                    <div>
                        <el-button
                                v-hasPerm="['sys:odsErpRetailSalesOrderDetails:save']"
                                type="success"
                                @click="openDialog()"
                        ><i-ep-plus />新增</el-button
                        >
                        <el-button
                                type="danger"
                                :disabled="ids.length === 0"
                                @click="handleDelete()"
                                v-hasPerm="['sys:odsErpRetailSalesOrderDetails:delete']"
                        ><i-ep-delete />删除</el-button
                        >
                    </div>
                    <div>
                        <el-button class="ml-3" @click="openImportDialog" v-hasPerm="['sys:odsErpRetailSalesOrderDetails:import']"
                        ><template #icon><i-ep-top /></template>导入</el-button
                        >
                        <el-button class="ml-3" @click="handleExport" v-hasPerm="['sys:odsErpRetailSalesOrderDetails:export']"
                        ><template #icon><i-ep-download /></template>导出</el-button
                        >
                    </div>
                </div>
            </template>
            <el-table
                    size="small"
                    :header-row-style="{color: 'dimgray'}"
                    v-loading="loading"
                    highlight-current-row
                    :data="odsErpRetailSalesOrderDetailsList"
                    border
                    @selection-change="handleSelectionChange"
                    :height="odsErpRetailSalesOrderDetailsList && odsErpRetailSalesOrderDetailsList.length > 0 ? 580 : 130"
            >
                <el-table-column type="selection" width="40" align="center" show-overflow-tooltip />
                <el-table-column label="单据编号" prop="djbh" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="mibh" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="mxbh" width="100" show-overflow-tooltip/>
                <el-table-column label="商品代码" prop="spdm" width="100" show-overflow-tooltip/>
                <el-table-column label="颜色代码" prop="gg1dm" width="100" show-overflow-tooltip/>
                <el-table-column label="尺码代码" prop="gg2dm" width="100" show-overflow-tooltip/>
                <el-table-column label="数量" prop="sl" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="sl1" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="sl2" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="sl3" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="bzsl" width="100" show-overflow-tooltip/>
                <el-table-column label="标准价" prop="ckj" width="100" show-overflow-tooltip/>
                <el-table-column label="折扣" prop="zk" width="100" show-overflow-tooltip/>
                <el-table-column label="单价" prop="dj" width="100" show-overflow-tooltip/>
                <el-table-column label="默认单价" prop="dj1" width="100" show-overflow-tooltip/>
                <el-table-column label="原单价" prop="dj2" width="100" show-overflow-tooltip/>
                <el-table-column label="成本价" prop="dj3" width="100" show-overflow-tooltip/>
                <el-table-column label="金额" prop="je" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="je1" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="je2" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="je3" width="100" show-overflow-tooltip/>
                <el-table-column label="标准金额" prop="bzje" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="bzs" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="hh" width="100" show-overflow-tooltip/>
                <el-table-column label="小票号" prop="djh" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="mih" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="mxh" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="djh1" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="mih1" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="mxh1" width="100" show-overflow-tooltip/>
                <el-table-column label="备注" prop="bz" width="100" show-overflow-tooltip/>
                <el-table-column label="价格选定" prop="byzd1" width="100" show-overflow-tooltip/>
                <el-table-column label="锁定" prop="byzd2" width="100" show-overflow-tooltip/>
                <el-table-column label="店员号" prop="byzd3" width="100" show-overflow-tooltip/>
                <el-table-column label="VIP号" prop="byzd4" width="100" show-overflow-tooltip/>
                <el-table-column label="礼券卡" prop="byzd5" width="100" show-overflow-tooltip/>
                <el-table-column label="店员名称" prop="byzd6" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="byzd7" width="100" show-overflow-tooltip/>
                <el-table-column label="扣率" prop="byzd8" width="100" show-overflow-tooltip/>
                <el-table-column label="结算额" prop="byzd9" width="100" show-overflow-tooltip/>
                <el-table-column label="补偿金额" prop="byzd10" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="byzd11" width="100" show-overflow-tooltip/>
                <el-table-column label="折扣" prop="byzd12" width="100" show-overflow-tooltip/>
                <el-table-column label="扣率" prop="byzd13" width="100" show-overflow-tooltip/>
                <el-table-column label="销售时间" prop="byzd14" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="byzd15" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="byzd16" width="100" show-overflow-tooltip/>
                <el-table-column label="商场活动" prop="schd" width="100" show-overflow-tooltip/>
                <el-table-column label="批次代码" prop="pcdm" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="jsjg" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="jishuije" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="yxyjje" width="100" show-overflow-tooltip/>
                <el-table-column label="库位名称" prop="kwdm" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="cxlx" width="100" show-overflow-tooltip/>
                <el-table-column label="整单促销编号" prop="zdcxdh" width="100" show-overflow-tooltip/>
                <el-table-column label="捆绑促销编号" prop="kbcxdh" width="100" show-overflow-tooltip/>
                <el-table-column label="商品状态" prop="spStatus" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="gjyy" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="thhyy" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="ppdm" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="thhType" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="thsl" width="100" show-overflow-tooltip/>
                <el-table-column label="小票编号" prop="xpbh" width="100" show-overflow-tooltip/>
                <el-table-column label="积分" prop="jf" width="100" show-overflow-tooltip/>
                <el-table-column label="商品积分" prop="spjf" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="dzyhje" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="dzzk" width="100" show-overflow-tooltip/>
                <el-table-column label="礼券卡" prop="dzbh" width="100" show-overflow-tooltip/>
                <el-table-column label="捆绑促销名称" prop="kbcxmc" width="100" show-overflow-tooltip/>
                <el-table-column label="整单促销名称" prop="zdcxmc" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="yxsl" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="ftje" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="jfje" width="100" show-overflow-tooltip/>
                <el-table-column label="退货处理" prop="thcl" width="100" show-overflow-tooltip/>
                <el-table-column label="会员储值本金" prop="vpczbj" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="thhMxid" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="detailIndex" width="100" show-overflow-tooltip/>
                <el-table-column label="POS条码" prop="possptm" width="100" show-overflow-tooltip/>
                <el-table-column label="包装规格" prop="bzgg" width="100" show-overflow-tooltip/>
                <el-table-column label="包装规格单价" prop="bzggdj" width="100" show-overflow-tooltip/>
                <el-table-column label="包装规格数量" prop="bzggsl" width="100" show-overflow-tooltip/>
                <el-table-column label="包装规格参考价" prop="bzggckj" width="100" show-overflow-tooltip/>
                <el-table-column label="包装规格折扣" prop="bzggzk" width="100" show-overflow-tooltip/>
                <el-table-column label="网购" prop="isWeb" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="zkdjTj" width="100" show-overflow-tooltip/>
                <el-table-column label="税额" prop="tax" width="100" show-overflow-tooltip/>
                <el-table-column label="税额本位币" prop="taxDc" width="100" show-overflow-tooltip/>
                <el-table-column label="不含税金额" prop="jeWithoutTax" width="100" show-overflow-tooltip/>
                <el-table-column label="不含税金额本位币" prop="jeWithoutTaxDc" width="100" show-overflow-tooltip/>
                <el-table-column label="税率" prop="taxRate" width="100" show-overflow-tooltip/>
                <el-table-column label="不含税单价" prop="priceWithoutTax" width="100" show-overflow-tooltip/>
                <el-table-column label="不含税单价本位币" prop="priceWithoutTaxDc" width="100" show-overflow-tooltip/>
                <el-table-column label="金额本位币" prop="jeDc" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="shareShippingFee" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="ispj" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="zkdySign" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="spzk" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="zk1" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="zk2" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="zk3" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="yssl" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="xsje" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="statusCode" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="isstoredelivery" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="epc" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="dhjf" width="100" show-overflow-tooltip/>
                <el-table-column label="生产时间" prop="pcscrq" width="100" show-overflow-tooltip/>
                <el-table-column label="有效期（天）" prop="pcyxq" width="100" show-overflow-tooltip/>
                <el-table-column label="到期日" prop="pcdqr" width="100" show-overflow-tooltip/>
                <el-table-column label="临期日" prop="pclqr" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="xxje" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="cldm" width="100" show-overflow-tooltip/>
                <el-table-column label="" prop="clmc" width="100" show-overflow-tooltip/>
                <el-table-column label="" show-overflow-tooltip/>
                <el-table-column fixed="right" label="操作" align="center" width="120">
                    <template #default="scope">
                        <el-button
                                v-hasPerm="['sys:odsErpRetailSalesOrderDetails:save']"
                                type="primary"
                                link
                                size="small"
                                @click.stop="openDialog(scope.row.id)"
                        ><i-ep-edit />编辑</el-button
                        >
                        <el-button
                                v-hasPerm="['sys:odsErpRetailSalesOrderDetails:delete']"
                                type="primary"
                                link
                                size="small"
                                @click.stop="handleDelete(scope.row.id)"
                        ><i-ep-delete />删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>

            <pagination
                    v-if="total > 0"
                    v-model:total="total"
                    v-model:page="queryParams.pageNum"
                    v-model:limit="queryParams.pageSize"
                    @pagination="handleQuery"
            />
        </el-card>

        <el-dialog
                v-model="dialog.visible"
                :title="dialog.title"
                width="500px"
                :close-on-click-modal="false"
                @close="closeDialog"
        >
            <el-form
                    ref="dataFormRef"
                    :model="formData"
                    :rules="rules"
                    label-width="150px"
            >
                    <el-form-item label="单据编号" prop="djbh">
                        <el-input v-model="formData.djbh" placeholder="请输入单据编号" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="mibh">
                        <el-input v-model="formData.mibh" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="mxbh">
                        <el-input v-model="formData.mxbh" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="商品代码" prop="spdm">
                        <el-input v-model="formData.spdm" placeholder="请输入商品代码" clearable/>
                    </el-form-item>
                    <el-form-item label="颜色代码" prop="gg1dm">
                        <el-input v-model="formData.gg1dm" placeholder="请输入颜色代码" clearable/>
                    </el-form-item>
                    <el-form-item label="尺码代码" prop="gg2dm">
                        <el-input v-model="formData.gg2dm" placeholder="请输入尺码代码" clearable/>
                    </el-form-item>
                    <el-form-item label="数量" prop="sl">
                        <el-input v-model="formData.sl" placeholder="请输入数量" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="sl1">
                        <el-input v-model="formData.sl1" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="sl2">
                        <el-input v-model="formData.sl2" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="sl3">
                        <el-input v-model="formData.sl3" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="bzsl">
                        <el-input v-model="formData.bzsl" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="标准价" prop="ckj">
                        <el-input v-model="formData.ckj" placeholder="请输入标准价" clearable/>
                    </el-form-item>
                    <el-form-item label="折扣" prop="zk">
                        <el-input v-model="formData.zk" placeholder="请输入折扣" clearable/>
                    </el-form-item>
                    <el-form-item label="单价" prop="dj">
                        <el-input v-model="formData.dj" placeholder="请输入单价" clearable/>
                    </el-form-item>
                    <el-form-item label="默认单价" prop="dj1">
                        <el-input v-model="formData.dj1" placeholder="请输入默认单价" clearable/>
                    </el-form-item>
                    <el-form-item label="原单价" prop="dj2">
                        <el-input v-model="formData.dj2" placeholder="请输入原单价" clearable/>
                    </el-form-item>
                    <el-form-item label="成本价" prop="dj3">
                        <el-input v-model="formData.dj3" placeholder="请输入成本价" clearable/>
                    </el-form-item>
                    <el-form-item label="金额" prop="je">
                        <el-input v-model="formData.je" placeholder="请输入金额" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="je1">
                        <el-input v-model="formData.je1" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="je2">
                        <el-input v-model="formData.je2" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="je3">
                        <el-input v-model="formData.je3" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="标准金额" prop="bzje">
                        <el-input v-model="formData.bzje" placeholder="请输入标准金额" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="bzs">
                        <el-input v-model="formData.bzs" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="hh">
                        <el-input v-model="formData.hh" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="小票号" prop="djh">
                        <el-input v-model="formData.djh" placeholder="请输入小票号" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="mih">
                        <el-input v-model="formData.mih" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="mxh">
                        <el-input v-model="formData.mxh" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="djh1">
                        <el-input v-model="formData.djh1" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="mih1">
                        <el-input v-model="formData.mih1" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="mxh1">
                        <el-input v-model="formData.mxh1" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="备注" prop="bz">
                        <el-input v-model="formData.bz" placeholder="请输入备注" clearable/>
                    </el-form-item>
                    <el-form-item label="价格选定" prop="byzd1">
                        <el-input v-model="formData.byzd1" placeholder="请输入价格选定" clearable/>
                    </el-form-item>
                    <el-form-item label="锁定" prop="byzd2">
                        <el-input v-model="formData.byzd2" placeholder="请输入锁定" clearable/>
                    </el-form-item>
                    <el-form-item label="店员号" prop="byzd3">
                        <el-input v-model="formData.byzd3" placeholder="请输入店员号" clearable/>
                    </el-form-item>
                    <el-form-item label="VIP号" prop="byzd4">
                        <el-input v-model="formData.byzd4" placeholder="请输入VIP号" clearable/>
                    </el-form-item>
                    <el-form-item label="礼券卡" prop="byzd5">
                        <el-input v-model="formData.byzd5" placeholder="请输入礼券卡" clearable/>
                    </el-form-item>
                    <el-form-item label="店员名称" prop="byzd6">
                        <el-input v-model="formData.byzd6" placeholder="请输入店员名称" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="byzd7">
                        <el-input v-model="formData.byzd7" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="扣率" prop="byzd8">
                        <el-input v-model="formData.byzd8" placeholder="请输入扣率" clearable/>
                    </el-form-item>
                    <el-form-item label="结算额" prop="byzd9">
                        <el-input v-model="formData.byzd9" placeholder="请输入结算额" clearable/>
                    </el-form-item>
                    <el-form-item label="补偿金额" prop="byzd10">
                        <el-input v-model="formData.byzd10" placeholder="请输入补偿金额" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="byzd11">
                        <el-input v-model="formData.byzd11" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="折扣" prop="byzd12">
                        <el-input v-model="formData.byzd12" placeholder="请输入折扣" clearable/>
                    </el-form-item>
                    <el-form-item label="扣率" prop="byzd13">
                        <el-input v-model="formData.byzd13" placeholder="请输入扣率" clearable/>
                    </el-form-item>
                    <el-form-item label="销售时间" prop="byzd14">
                        <el-input v-model="formData.byzd14" placeholder="请输入销售时间" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="byzd15">
                        <el-input v-model="formData.byzd15" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="byzd16">
                        <el-input v-model="formData.byzd16" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="商场活动" prop="schd">
                        <el-input v-model="formData.schd" placeholder="请输入商场活动" clearable/>
                    </el-form-item>
                    <el-form-item label="批次代码" prop="pcdm">
                        <el-input v-model="formData.pcdm" placeholder="请输入批次代码" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="jsjg">
                        <el-input v-model="formData.jsjg" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="jishuije">
                        <el-input v-model="formData.jishuije" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="yxyjje">
                        <el-input v-model="formData.yxyjje" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="库位名称" prop="kwdm">
                        <el-input v-model="formData.kwdm" placeholder="请输入库位名称" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="cxlx">
                        <el-input v-model="formData.cxlx" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="整单促销编号" prop="zdcxdh">
                        <el-input v-model="formData.zdcxdh" placeholder="请输入整单促销编号" clearable/>
                    </el-form-item>
                    <el-form-item label="捆绑促销编号" prop="kbcxdh">
                        <el-input v-model="formData.kbcxdh" placeholder="请输入捆绑促销编号" clearable/>
                    </el-form-item>
                    <el-form-item label="商品状态" prop="spStatus">
                        <el-input v-model="formData.spStatus" placeholder="请输入商品状态" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="gjyy">
                        <el-input v-model="formData.gjyy" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="thhyy">
                        <el-input v-model="formData.thhyy" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="ppdm">
                        <el-input v-model="formData.ppdm" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="thhType">
                        <el-input v-model="formData.thhType" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="thsl">
                        <el-input v-model="formData.thsl" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="小票编号" prop="xpbh">
                        <el-input v-model="formData.xpbh" placeholder="请输入小票编号" clearable/>
                    </el-form-item>
                    <el-form-item label="积分" prop="jf">
                        <el-input v-model="formData.jf" placeholder="请输入积分" clearable/>
                    </el-form-item>
                    <el-form-item label="商品积分" prop="spjf">
                        <el-input v-model="formData.spjf" placeholder="请输入商品积分" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="dzyhje">
                        <el-input v-model="formData.dzyhje" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="dzzk">
                        <el-input v-model="formData.dzzk" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="礼券卡" prop="dzbh">
                        <el-input v-model="formData.dzbh" placeholder="请输入礼券卡" clearable/>
                    </el-form-item>
                    <el-form-item label="捆绑促销名称" prop="kbcxmc">
                        <el-input v-model="formData.kbcxmc" placeholder="请输入捆绑促销名称" clearable/>
                    </el-form-item>
                    <el-form-item label="整单促销名称" prop="zdcxmc">
                        <el-input v-model="formData.zdcxmc" placeholder="请输入整单促销名称" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="yxsl">
                        <el-input v-model="formData.yxsl" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="ftje">
                        <el-input v-model="formData.ftje" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="jfje">
                        <el-input v-model="formData.jfje" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="退货处理" prop="thcl">
                        <el-input v-model="formData.thcl" placeholder="请输入退货处理" clearable/>
                    </el-form-item>
                    <el-form-item label="会员储值本金" prop="vpczbj">
                        <el-input v-model="formData.vpczbj" placeholder="请输入会员储值本金" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="thhMxid">
                        <el-input v-model="formData.thhMxid" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="detailIndex">
                        <el-input v-model="formData.detailIndex" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="POS条码" prop="possptm">
                        <el-input v-model="formData.possptm" placeholder="请输入POS条码" clearable/>
                    </el-form-item>
                    <el-form-item label="包装规格" prop="bzgg">
                        <el-input v-model="formData.bzgg" placeholder="请输入包装规格" clearable/>
                    </el-form-item>
                    <el-form-item label="包装规格单价" prop="bzggdj">
                        <el-input v-model="formData.bzggdj" placeholder="请输入包装规格单价" clearable/>
                    </el-form-item>
                    <el-form-item label="包装规格数量" prop="bzggsl">
                        <el-input v-model="formData.bzggsl" placeholder="请输入包装规格数量" clearable/>
                    </el-form-item>
                    <el-form-item label="包装规格参考价" prop="bzggckj">
                        <el-input v-model="formData.bzggckj" placeholder="请输入包装规格参考价" clearable/>
                    </el-form-item>
                    <el-form-item label="包装规格折扣" prop="bzggzk">
                        <el-input v-model="formData.bzggzk" placeholder="请输入包装规格折扣" clearable/>
                    </el-form-item>
                    <el-form-item label="网购" prop="isWeb">
                        <el-input v-model="formData.isWeb" placeholder="请输入网购" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="zkdjTj">
                        <el-input v-model="formData.zkdjTj" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="税额" prop="tax">
                        <el-input v-model="formData.tax" placeholder="请输入税额" clearable/>
                    </el-form-item>
                    <el-form-item label="税额本位币" prop="taxDc">
                        <el-input v-model="formData.taxDc" placeholder="请输入税额本位币" clearable/>
                    </el-form-item>
                    <el-form-item label="不含税金额" prop="jeWithoutTax">
                        <el-input v-model="formData.jeWithoutTax" placeholder="请输入不含税金额" clearable/>
                    </el-form-item>
                    <el-form-item label="不含税金额本位币" prop="jeWithoutTaxDc">
                        <el-input v-model="formData.jeWithoutTaxDc" placeholder="请输入不含税金额本位币" clearable/>
                    </el-form-item>
                    <el-form-item label="税率" prop="taxRate">
                        <el-input v-model="formData.taxRate" placeholder="请输入税率" clearable/>
                    </el-form-item>
                    <el-form-item label="不含税单价" prop="priceWithoutTax">
                        <el-input v-model="formData.priceWithoutTax" placeholder="请输入不含税单价" clearable/>
                    </el-form-item>
                    <el-form-item label="不含税单价本位币" prop="priceWithoutTaxDc">
                        <el-input v-model="formData.priceWithoutTaxDc" placeholder="请输入不含税单价本位币" clearable/>
                    </el-form-item>
                    <el-form-item label="金额本位币" prop="jeDc">
                        <el-input v-model="formData.jeDc" placeholder="请输入金额本位币" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="shareShippingFee">
                        <el-input v-model="formData.shareShippingFee" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="ispj">
                        <el-input v-model="formData.ispj" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="zkdySign">
                        <el-input v-model="formData.zkdySign" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="spzk">
                        <el-input v-model="formData.spzk" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="zk1">
                        <el-input v-model="formData.zk1" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="zk2">
                        <el-input v-model="formData.zk2" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="zk3">
                        <el-input v-model="formData.zk3" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="yssl">
                        <el-input v-model="formData.yssl" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="xsje">
                        <el-input v-model="formData.xsje" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="statusCode">
                        <el-input v-model="formData.statusCode" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="isstoredelivery">
                        <el-input v-model="formData.isstoredelivery" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="epc">
                        <el-input v-model="formData.epc" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="dhjf">
                        <el-input v-model="formData.dhjf" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="生产时间" prop="pcscrq">
                        <el-input v-model="formData.pcscrq" placeholder="请输入生产时间" clearable/>
                    </el-form-item>
                    <el-form-item label="有效期（天）" prop="pcyxq">
                        <el-input v-model="formData.pcyxq" placeholder="请输入有效期（天）" clearable/>
                    </el-form-item>
                    <el-form-item label="到期日" prop="pcdqr">
                        <el-input v-model="formData.pcdqr" placeholder="请输入到期日" clearable/>
                    </el-form-item>
                    <el-form-item label="临期日" prop="pclqr">
                        <el-input v-model="formData.pclqr" placeholder="请输入临期日" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="xxje">
                        <el-input v-model="formData.xxje" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="cldm">
                        <el-input v-model="formData.cldm" placeholder="请输入" clearable/>
                    </el-form-item>
                    <el-form-item label="" prop="clmc">
                        <el-input v-model="formData.clmc" placeholder="请输入" clearable/>
                    </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="handleSubmit">确 定</el-button>
                    <el-button @click="closeDialog">取 消</el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 导入弹窗 -->
        <el-dialog
                v-model="importDialog.visible"
                :title="importDialog.title"
                width="600px"
                append-to-body
                @close="closeImportDialog"
        >
            <el-form label-width="80px">
                <el-form-item label="Excel">
                    <el-upload
                            class="upload-demo"
                            action=""
                            drag
                            :auto-upload="false"
                            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                            :file-list="excelFilelist"
                            :on-change="handleExcelChange"
                            :limit="1"
                    >
                        <el-icon class="el-icon--upload">
                            <i-ep-upload-filled/>
                        </el-icon>
                        <div class="el-upload__text">
                            将文件拖到此处，或
                            <em>点击上传</em>
                        </div>
                        <template #tip>
                            <div class="el-upload__tip">xls/xlsx files</div>
                        </template>
                    </el-upload>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="handleImport">确 定</el-button>
                    <el-button @click="closeImportDialog">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
